<template>
  <div>
    <!-- <header> -->
    <van-dropdown-menu v-if="headerFlag">
      <!-- 待处理没有筛选条件 -->
      <van-dropdown-item @change="valChange" v-if="type == 1" v-model="value1" :options="option1" />
      <van-dropdown-item @change="valChange1" v-if="type == 2" v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <!-- </header> -->
    <van-list class="list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ul>
        <li @click="pushDetail(isShow,item)" v-for="(item, index) in dataList" :key="index">
          <div class="left">
            <div class="img"><img :src="'http://niu.icrobot.cn/'+item.userHead" alt=""></div>
            <div class="message">
              <!-- submitUsername -->
              <h3 v-if="type != 2">{{item.submitUsername}}的精彩视频审批</h3>
              <h3 v-if="type == 2">{{item.submitUser}}的精彩视频审批</h3>
              <p style="margin-top:0.22rem" v-if="type != 2">发起人：{{item.submitUsername}}</p>
              <p style="margin-top:0.22rem" v-if="type == 2">发起人：{{item.submitUser}}</p>
              <p>隶属校区/部门：{{item.areaName}}</p>
              <div class="status">{{status}}</div>
            </div>
          </div>
          <div class="right">
            {{item.createTime}}
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 待处理  无
      // 已处理
      value1: 2,
      option1: [
        { text: "审批通过", value: 2 },
        { text: "审批拒绝", value: 3 },
      ],
      // 已发起
      value2: 1,
      option2: [
        { text: "审批通过", value: 2 },
        { text: "审批拒绝", value: 3 },
        { text: "待审批", value: 1 },
      ],
      headerFlag: true,
      bodyFlag: false,
      type: "",
      isShow: "",
      status: "待处理",
      // 分页数据
      pageNum: 1,
      // 数据总量
      totalNum: "",
      loading: false,
      finished: false,
      dataList: [],
      number: "",
      faqi: 1
    };
  },
  mounted() {
    this.isShow = this.$route.query.isShow;
    this.type = this.$route.query.type;
    // this.onLoad();
    // 待处理
    if (this.type == 0) {
      this.headerFlag = false;
      this.status = "待处理";
    }
    // 已处理
    if (this.type == 1) {
      this.headerFlag = true;
      this.status = "已处理";
    }
    // 已发起
    if (this.type == 2) {
      this.headerFlag = true;
      this.status = "已发起";
    }
  },
  methods: {
    onLoad() {
      // 待处理
      if (this.type == 0) {
        this.number = 1;
        this.approveQueryData();
      }
      // 已处理
      if (this.type == 1) {
        this.number = 2;
        this.approveQueryData();
      }
      // 已发起
      if (this.type == 2) {
        this.number = 2;
        this.commonQueryData();
      }
    },
    // common数据展示
    commonQueryData() {
      (async () => {
        const { data } = await this.get(
          "/approve/queryApproveByStatusAndUserId",
          {
            userId: localStorage.getItem("id"),
            renwuType: "精彩视频",
            status: this.faqi,
            pageSize: 10,
            pageNum: this.pageNum,
          }
        );
        this.totalNum = data.totalNum;
        this.dataList = [...this.dataList, ...data.items];
        this.pageNum++;
        this.loading = false;

        // 数据全部加载完成
        if (this.dataList.length >= this.totalNum) {
          this.finished = true;
        }
      })();
    },
    // 待处理展示  有权限控制
    approveQueryData() {
      (async () => {
        const { data } = await this.get(
          "/approve/queryApproveByStatusAndBossUser",
          {
            userId: localStorage.getItem("id"),
            renwuType: "精彩视频",
            status: this.number,
            pageSize: 10,
            pageNum: this.pageNum,
          }
        );
        this.totalNum = data.totalNum;
        this.dataList = [...this.dataList, ...data.items];
        this.pageNum++;
        this.loading = false;

        // 数据全部加载完成
        if (this.dataList.length >= this.totalNum) {
          this.finished = true;
        }
      })();
    },
    // 下拉改变
    valChange(val) {
      this.number = val;
      this.pageNum = 1;
      this.dataList=[];
      this.approveQueryData();
    },
    // 已发起改变
    valChange1(val) {
      this.faqi = val;
      this.pageNum = 1;
      this.dataList=[];
      this.commonQueryData();
    },
    pushDetail(isShow, item) {
      this.$router.push({
        path: "/processedDetail",
        query: {
          isShow: isShow,
          taskId: item.taskId,
          infos: item,
          status: this.status
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .van-dropdown-menu__title--active {
  color: #2e9eff !important;
}
/deep/ .van-dropdown-item__option--active {
  color: #2e9eff !important;
}
/deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #2e9eff !important;
}
header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem;
  box-sizing: border-box;
  border-bottom: 0.01rem solid #e7e7e7;
  img {
    width: 0.26rem;
    height: 0.26rem;
  }
  span {
    margin-left: 0.08rem;
    font-size: 0.26rem;
    color: #343434;
  }
}
ul {
  padding: 0 0.2rem;
  box-sizing: border-box;
  li {
    display: flex;
    // align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0;
    box-sizing: border-box;
    border-bottom: 0.01rem solid #eee;
    .right {
      font-size: 0.2rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #7f7f7f;
    }
    .left {
      display: flex;
      .img {
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          vertical-align: top;
        }
      }
      .message {
        margin-left: 0.15rem;
        width: 4.6rem;
        h3 {
          font-size: 0.26rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #343434;
        }
        p {
          font-size: 0.22rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #808080;
        }
        .status {
          margin-top: 0.3rem;
          font-size: 0.2rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #fa742a;
        }
      }
    }
  }
}
</style>